<template>
    <div class="flex">
        <div class="info-text">
            <p class="mb-8">设备详情</p>
            <div class="info-text-box">
                <label>名称</label>
                <p>{{ infoText.basicInfo.hostname }}</p>
                <label>系统</label>
                <p>{{ infoText.basicInfo.os }}</p>
                <label>在线状态</label>
                <p>{{ infoText.basicInfo.scanStatus }}</p>
                <label>IP地址</label>
                <p>{{ infoText.basicInfo.ip }}</p>
                <label>MAC地址</label>
                <p>{{ infoText.basicInfo.mac || '空' }}</p>
                <label>主机名</label>
                <p>{{ infoText.basicInfo.hostname }}</p>
                <label>CPU</label>
                <p>{{ infoText.cpu }}</p>
                <label>硬盘</label>
                <p>{{ infoText.disk }}</p>
                <label>内存</label>
                <p>{{ infoText.memory.name + infoText.memory.size }}</p>
            </div>
        </div>
        <div class="info-table">
            <el-table ref="tableList" :data="infoTable" :border="false" stripe style="width: 100%" :row-key="row => row.index"
                :expand-row-keys="expands" @expand-change="expandColumn">
                <el-table-column type="expand">
                    <template #default="props">
                        <el-table :data="props.row.family" :border="false" style="width: 90%;margin: 0 auto;">
                            <template v-if="props.$index == 0">
                                <el-table-column label="名称" prop="brief"></el-table-column>
                                <el-table-column label="类型" prop="type"></el-table-column>
                            </template>
                            <template v-if="props.$index == 1">
                                <el-table-column label="名称" prop="name"></el-table-column>
                                <el-table-column label="版本" prop="version"></el-table-column>
                                <el-table-column label="时间" prop="time"></el-table-column>
                                <el-table-column label="厂商" prop="vendor"></el-table-column>
                            </template>
                            <template v-if="props.$index == 2">
                                <el-table-column label="名称" prop="name"></el-table-column>
                                <el-table-column label="时间" prop="time"></el-table-column>
                            </template>
                        </el-table>
                        <el-pagination class="justify-center" :page-size="10" :pager-count="7"
                            layout="total,prev, pager, next" :total="props.row.family.length">
                        </el-pagination>
                    </template>
                </el-table-column>
                <el-table-column prop="rowName" />
            </el-table>
        </div>
    </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { getInfoDetail } from '~/utils/axios/defender.js'
const $route = useRoute()
const oid = $route.params.oid;
const openNum = ref(null)
const tableList = ref()
const infoText = reactive({
    basicInfo: [],
    cpu: '',
    disk: '',
    memory: ''
})
const infoTable = ref([])
async function getInfoDetailFn() {
    let infoReq = await getInfoDetail(oid)
    infoText.basicInfo = infoReq.data.guardStatus;
    infoText.cpu = infoReq.data.resource.data.cpu[0].brief;
    infoText.disk = infoReq.data.resource.data.disk[0].brief;
    infoText.memory = infoReq.data.resource.data.memory[0];
    if(!infoReq.data.resource.data.netcard){
        return
    }
    infoTable.value.push({ index: 0, rowName: '网卡数量' + infoReq.data.resource.data.netcard.length, family: infoReq.data.resource.data.netcard })
    infoTable.value.push({ index: 1, rowName: '安装软件' + infoReq.data.resource.softres.software.length, family: infoReq.data.resource.softres.software })
    infoTable.value.push({ index: 2, rowName: '补丁数量' + infoReq.data.resource.softres.kb.length, family: infoReq.data.resource.softres.kb })
}
onMounted(() => {
    getInfoDetailFn()
})

let expands = ref([])
const expandColumn = (row, expandedRows) => {
    if (expandedRows.length) {
        //展开
        expands.value = []; //先干掉之前展开的行
        if (row) {
            expands.value.push(row.index); //push新的行 (原理有点类似防抖)
        }
    } else {
        expands.value = []; //折叠 就清空expand-row-keys对应的数组
    }
}
</script>

<style lang="scss" scoped>
.info-text {
    .info-text-box {
        font-size: 14px;
        color: #808080;

        label {
            display: inline-block;
            width: 25%;
            margin-bottom: 20px;
        }

        p {
            display: inline-block;
            width: 70%;
        }
    }
}

.info-text,
.info-table {
    width: 50%;
}
</style>